<template>
  <!-- 作业项目-作业类型 -->
  <view
    class="grid-body"
    :class="{ 'body-height-4': status === 4, 'body-height': status !== 4 }"
    style="overflow: auto"
  >
    <view class="cu-card-wrap" v-for="(item, index) in data" :key="index">
      <view class="affix">
        <image
          class="affix-icon"
          :src="`/static/images/ticket-type/work-type-${item.workTypeFlag}.png`"
          mode="aspectFit"
        />
      </view>
      <view class="body-wrap">
        <view class="title flex">
          <image class="icon-style" src="/static/images/icon1.png" mode="aspectFill"></image>
          <div class="work-content" @click="showContent(item)">{{ item.workContent }}</div>
        </view>
        <view class="content-wrap">
          <view class="label">作业地点：</view>
          <view class="value">{{ item.operationPoint }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">作业单位类型：</view>
          <view class="value">{{ item.unitTypeLabel }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">作业单位：</view>
          <view class="value">{{ item.unitName }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">作业负责人：</view>
          <view class="value">{{ item.directorName }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">风险辨识结果：</view>
          <view class="value">{{ item.riskIdentificationResult }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    status: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['staffId'])
  },
  onBackPress(options) {
    if (options.from === 'backbutton') {
      this.back()
      return true
    }
  },
  onLoad() {
    // 重新加载页面数据 data 为 true ,触发方式 uni.$emit('reload',true)
    uni.$on('reload', (data) => {})
  },
  methods: {
    dayjs,
    back() {
      uni.reLaunch({
        url: '/pages/work/index'
      })
    },
    showContent(info) {
      this.$modal.showToast(`${info.workContent}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-body {
  background-color: transparent;
  margin: 0 5px;
}

.grid-common {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.items-center {
  align-items: center;
}

.info-btn {
  flex-shrink: 0;
  margin-right: 0px;
  margin-left: 10px;
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    .text-label {
      display: flex;
      word-break: keep-all;
      color: #999;
      max-width: 35%;
    }

    text {
      color: #333;
      display: inline-block;
      word-break: break-all;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1rpx solid #d5d7e3;
  }
}

.button-wrap-todo {
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .button-wrap-left {
    display: flex;
    align-items: center;

    > view {
      margin-right: 16rpx;
      margin-left: 0;
    }
  }
}

.affix {
  //width: 90px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
}

uni-image.affix-icon {
  height: 30px !important;
  width: 78px !important;
}

.button-wrap {
  .status-button {
    border: 1rpx solid #88b4c4;
    color: #88b4c4;

    &.active {
      border: 1rpx solid #c87c32;
      color: #c87c32;
    }
  }
}

.cu-card-wrap {
  margin-bottom: 24rpx;
  position: relative;
  margin: 10px;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    align-items: center;
    height: 45px;
    margin-top: -15px;
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  &:first-child {
    margin-top: 24rpx;
  }
}
.body-height {
  height: calc(100vh - 205px);
}

.body-height-4 {
  height: calc(100vh - 255px);
}

.work-content {
  display: inline-block;
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
